/*
 * Copyright (c) 2010 Nokia Corporation.
 */

import QtQuick 1.0

Rectangle {
    id: window
    color: "#282828"

    property string back: "\u2190"

    Item {
        id: main

        width: parent.width; height: parent.height; anchors.centerIn: parent

        Column {
            id: box; spacing: 6

            anchors { fill: parent; topMargin: 6; bottomMargin: 6; leftMargin: 6; rightMargin: 6 }

            // First row in column - fixed height: 64
            Row {
                spacing: 6

                Display {
                    id: display
                    width: box.width-64
                    height: 64
                }

                Button {
                    id: deleteNum
                    width: 58
                    height: 64
                    color: 'blue'
                    operation: back
                }
            }

            // Second row in column - want this to fill available space
            Grid {
                id: grid; rows: 4; columns: 3; spacing: 6
                property real w: (box.width / columns) - ((spacing * (columns - 1)) / columns)
                property real h: (box.height - display.height - call.height - (spacing * (rows + 1))  ) / rows;

                Button { id: one; width: grid.w; height: grid.h; operation: "1"; color: 'blue' }
                Button { id: two; width: grid.w; height: grid.h; operation: "2"; color: 'blue' }
                Button { id: three; width: grid.w; height: grid.h; operation: "3"; color: 'blue' }
                Button { id: four; width: grid.w; height: grid.h; operation: "4"; color: 'blue' }
                Button { id: five; width: grid.w; height: grid.h; operation: "5"; color: 'blue' }
                Button { id: six; width: grid.w; height: grid.h; operation: "6"; color: 'blue' }
                Button { id: seven; width: grid.w; height: grid.h; operation: "7"; color: 'blue' }
                Button { id: eight; width: grid.w; height: grid.h; operation: "8"; color: 'blue' }
                Button { id: nine; width: grid.w; height: grid.h; operation: "9"; color: 'blue' }

                Rectangle { width: grid.w; height: grid.h; color: "#282828" } // spacer
                Button { id: zero; width: grid.w; height: grid.h; operation: "0"; color: 'blue' }
                Rectangle { width: grid.w; height: grid.h; color: "#282828" } // spacer
            }

            // "Toolbar" row in column contains the call button and the quit button
            Row {
                spacing: 6

                Button {
                    id: call
                    width: box.width-64
                    height: 64
                    color: 'green'
                    operation: "Call"
                }

                Button {
                    id: quit
                    width: 58
                    height: 64
                    color: 'grey'
                    operation: "X"
                }
            }
        }

        states: [

            // Connection states
            State {
                name: "idle"
                PropertyChanges { target: call; source: "images/button-green.png"; operation: "Call"}
            },
            State {
                name: "dialling"
                PropertyChanges { target: call; source: "images/button-red.png"; operation: "End Call"}
            },
            State {
                name: "connected" // same as dialling
                PropertyChanges { target: call; source: "images/button-red.png"; operation: "End Call"}
            }
        ]
    }

    // Receive signals from the telephony object in the page context
    // and change the UI state
    Connections {
        target: telephony
        onCallDialling: main.state = "dialling"
        onCallConnected: main.state = "connected"
        onCallDisconnected: main.state = "idle"
        onError: main.state = "idle"
    }

}
